<template>
  <div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="爱宠详情" name="1"></el-tab-pane>
        <el-tab-pane label="主人信息" name="2"></el-tab-pane>
        <el-tab-pane label="年审信息" name="3"></el-tab-pane>
        <el-tab-pane label="处罚记录" name="4"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 宠物详情 -->
    <div
      v-if="activeName == '1'"
      style="margin-left: 3%; margin-top: 3%"
      align="center"
    >
      <div v-for="dog in dogs" :key="dog.id">
        <div style="margin-top: 3%; margin-left: 3%; margin-bottom: 3%">
          <!-- 犬只正面的照片 -->
          <el-upload
            class="avatar-uploader"
            action="http://localhost:5051/image/upload"
            :show-file-list="false"
            :on-success="handlePositiveImage"
            style="margin-left: 3%; margin-top: 5%"
          >
            <img
              v-if="dog.dog_positive_image"
              :src="dog.dog_positive_image"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <div style="margin-top: 3%; margin-left: 3%">
          <h4 style="display: inline">姓名:</h4>
          <p style="display: inline; margin-left: 7%">
            {{ " " + dog.dname }}
          </p>
        </div>
        <div style="margin-top: 3%; margin-left: 3%">
          <h4 style="display: inline">犬种:</h4>
          <p style="display: inline; margin-left: 7%">
            {{ " " + dog.type }}
          </p>
        </div>
        <div style="margin-top: 3%; margin-left: 3%">
          <h4 style="display: inline">性别:</h4>
          <p style="display: inline; margin-left: 7%">
            {{ " " + dog.sex }}
          </p>
        </div>
        <div style="margin-top: 3%; margin-left: 3%">
          <h4 style="display: inline">年龄:</h4>
          <p style="display: inline; margin-left: 7%">
            {{ " " + dog.age }}
          </p>
        </div>

        <div style="margin-top: 3%; margin-left: 3%">
          <h4 style="display: inline">登记日期:</h4>
          <p style="display: inline; margin-left: 4%">
            {{ " " + new Date(dog.regist_date).toLocaleString() }}
          </p>
        </div>
        <div style="margin-top: 3%; margin-left: 3%">
          <h4 style="display: inline">电子犬证:</h4>
          <p style="display: inline; margin-left: 4%">
            {{ " " + dog.dogetc }}
          </p>
        </div>
        <div style="margin-top: 3%; margin-left: 3%">
          <h4 style="display: inline">芯片犬牌:</h4>
          <p style="display: inline; margin-left: 4%">
            {{ " " + dog.num_dog }}
          </p>
        </div>
      </div>
    </div>
    <!-- 主人信息 -->
    <div
      v-if="activeName == '2'"
      style="margin-left: 3%; margin-top: 3%"
      align="center"
    >
      <div style="display: inline; margin-left: 3%">
        <h4 style="display: inline">姓名:</h4>
        <p style="display: inline; margin-left: 4%">
          {{ " " + uname }}
        </p>
      </div>
      <div style="margin-top: 3%; margin-left: 3%">
        <h4 style="display: inline">性别:</h4>
        <p style="display: inline; margin-left: 4%">
          {{ " " + usex }}
        </p>
      </div>
      <div style="margin-top: 3%; margin-left: 3%">
        <h4 style="display: inline">联系电话:</h4>
        <p style="display: inline; margin-left: 4%">
          {{ " " + tel }}
        </p>
      </div>
      <div style="margin-top: 3%; margin-left: 3%">
        <h4 style="display: inline">居住地址:</h4>
        <p style="display: inline; margin-left: 4%">
          {{ " " + address }}
        </p>
      </div>
    </div>
    <!-- 年审信息 -->
    <div v-if="activeName == '3'" style="margin-left: 3%; margin-top: 3%">
      <el-table :data="tableData01" style="width: 100%" align="center">
        <el-table-column label="记录照片" width="180" align="center">
          <template slot-scope="scope">
            <div
              slot="reference"
              class="name-wrapper"
              style="height: 130px"
              align="center"
            >
              <img :src="scope.row.profile_photo" class="avatar" />
            </div>
          </template>
        </el-table-column>
        <!-- :data="tableData" -->
        <el-table-column
          label="年审时间"
          width="180"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{
                new Date(scope.row.check_time).toLocaleString()
              }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="免疫信息" width="180" align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper" >
              <el-tag size="medium" v-if="scope.row.status == '1'">
                未通过
              </el-tag>
              <el-tag size="medium" v-if="scope.row.status == '2'">
                已通过
              </el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 处罚记录 -->
    <div v-if="activeName == '4'" style="margin-left: 3%; margin-top: 3%">
      <el-table :data="tableData02" style="width: 100%" align="center">
        <el-table-column label="记录照片" width="180" align="center">
          <template slot-scope="scope">
            <div
              slot="reference"
              class="name-wrapper"
              style="height: 130px"
              align="center"
            >
              <img :src="scope.row.photo" class="avatar" />
            </div>
          </template>
        </el-table-column>
        <!-- :data="tableData" -->
        <el-table-column
          label="处罚时间"
          width="180"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{
                new Date(scope.row.punish_date).toLocaleString()
              }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="处罚行为" width="180" align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">
                {{ scope.row.active }}
              </el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="处罚措施" width="180" align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">
                {{ scope.row.result }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        @next-click="next"
        @prev-click="prev"
        :current-page="currentPage"
        :page-sizes="[8]"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  data() {
    return {
      activeName: "1",

      //分页
      currentPage: 1, //当前页
      page: 1,
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小

      // 宠物信息
      //狗狗正面照片
      dogs: [
        {
          id: "",
          dog_positive_image: "",
          dname: "",
          type: "",
          sex: "",
          age: "",
          regist_date: "",
          dogetc: "",
          num_dog: "",
        },
      ],

      //主人信息
      uname: "",
      usex: "",
      tel: "",
      address: "",

      //年审信息
      tableData01: [
        {
          profile_photo: "",
          check_time: "",
          status: "",
        },
      ],

      tableData02: [
        {
          //处罚记录
          photo: "",
          punish_date: "",
          active: "",
          result: "",
        },
      ],
    };
  },
  methods: {
    //查找宠物信息
    findPetInfo() {
      axios
        .get(
          commons.baseUrl +
            "user/pet/petInfo?u_id=" +
            this.$store.state.person.id
        )
        .then((resp) => {
          console.log(resp);
          this.dogs = resp.data.data;
        });
    },
    //查找用户信息
    findUser() {
      console.log(this.$store.state.person);
      this.uname = this.$store.state.person.name;
      this.usex = this.$store.state.person.sex;
      this.tel = this.$store.state.person.tel;
      this.address = this.$store.state.person.address;
    },
    //查找年审记录
    findcheckInfo() {
      axios
        .get(
          commons.baseUrl +
            "user/pet/getdogbyuid?uid=" +
            this.$store.state.person.id
        )
        .then((res) => {
          
          this.tableData01 = res.data.data;
          console.log(this.tableData01);
        });
    },
    //查找惩处记录
    findPunishInfo() {
      axios
        .get(
          commons.baseUrl +
            "user/pet/punishment?u_id=" +
            this.$store.state.person.id +
            "&page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData02 = res.data.datas;
          console.log(this.tableData02);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //下一页
    next() {
      this.page = this.page + 1;
      this.findAll();
    },

    //上一页
    prev() {
      this.page = this.page - 1;
      this.findAll();
    },

    //上传狗狗正面照片的回调函数
    handlePositiveImage(res, file) {
      console.log(res);
      this.dog_positive_image = res.data;
      // this.tableData01.full_face_photo = res.data;
      // this.tableData02.photo = res.data;

    },

    handleClick(tab, event) {
      var activeName = this.activeName;
      console.log(tab, event);
      console.info(activeName);
    },
  },
  mounted() {
    this.findPetInfo();
    this.findUser();
    this.findPunishInfo();
    this.findcheckInfo();
  },
  computed: {},
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #fffbfb;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
